<template>
  <div class="refuse-dialog">
    <el-dialog v-model="dialogVisible" width="500" @close="close(ruleFormRef)">
      <template #header>
        <div class="head_title">
          <p>拒绝</p>
        </div>
      </template>
      <div class="content">
        <el-form ref="ruleFormRef" :rules="rules" :model="form" label-width="auto" style="max-width: 600px">
          <el-form-item label="请选择拒绝原因" prop="refuseReason">
            <el-select class="select" v-model="form.refuseReason" placeholder="请选择">
              <el-option v-for="(item, index) in options" :key="index" :label="item" :value="item" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <!-- 备注信息 -->
            <Editor v-model="form.refuseRemark" />
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button class="btn" type="info" plina @click="close(ruleFormRef)">取消</el-button>
          <el-button class="btn" type="primary" @click="submit(ruleFormRef)">提交</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
import { computed, ref } from "vue";
import Editor from "@/components/Editor";
const props = defineProps({
  isOpen: {
    type: Boolean,
    default: false
  },
  options: {
    type: Array,
    default: []
  }
});
const emit = defineEmits(["update:isOpen", "submit", "close"]);
const dialogVisible = computed({
  get() {
    return props.isOpen;
  },
  set(value) {
    emit("update:isOpen", value);
  }
});

const form = ref({});
const ruleFormRef = ref();
const rules = ref({});

const close = formEl => {
  if (!formEl) return;
  formEl.resetFields();
  emit("close");
};
const submit = async formEl => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      emit("submit", form.value);
    } else {
      console.log("error submit!", fields);
    }
  });
};
</script>
<style scoped lang="scss">
.refuse-dialog {
  .head_title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    p {
      font-size: 18px;
      color: #131414;
      position: relative;
      margin-left: 14px;
    }
    p::before {
      content: "";
      display: inline-block;
      width: 6px;
      height: 6px;
      background: #007dff;
      margin-right: 10px;
      border-radius: 50%;
      position: absolute;
      left: -20px;
      top: 6px;
    }
    i {
      cursor: pointer;
    }
  }
  .content {
    margin-top: 10px;
    .select {
      background: #f2f3f5;
      ::v-deep(.el-select__wrapper) {
        background-color: transparent !important;
      }
    }
  }
  .dialog-footer {
    text-align: center;
    .btn {
      width: 120px;
    }
  }
}
</style>
